<template>
  <div style="padding: 0 0px" class="table_wrap">
    <pagetable
      ref="pagetable"
      :data="jgtab"
      :current-page="currentPage"
      :pageSize="pageSize"
      :total="jgtab.length"
      @selection-change="handleSelectionChange"
      @refresh-data="handleRefresh"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >
      <el-table-column
        show-overflow-tooltip
        type="index"
        label="序号"
        width="50"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="需求编号"
        prop="name"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="调控开始时间"
        prop="type"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="调控结束时间"
        prop="serviceType"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="接收时间"
        prop="linkPhone"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="调控类型"
        prop="linkName"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="需求来源"
        prop="linkName1"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="响应状态"
        prop="linkName2"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="目标"
        prop="linkName3"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        sortable
        label="评估分"
        prop="linkName4"
      ></el-table-column>
      <el-table-column label="操作" width="100" fixed="right">
        <template slot-scope="scope">
          <span
            @click="detailrev(scope.row)"
            style="color: blue; cursor: pointer; padding: 0 5px"
            >详情</span
          >
        </template>
      </el-table-column>
    </pagetable>

    <!-- 组织机构详情 -->
    <el-dialog
      class="dia_power"
      title="评估详情"
      :visible.sync="detailShow"
      width="980px"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
    >
      <div
        style="
          box-sizing: border-box;
          padding: 0px 28px;
          position: relative;
          top: -18px;
        "
      >
        <p class="p_title"><b>丨</b>评估设置</p>
        <div id="shezhi"></div>
        <p class="p_title"><b>丨</b>实时状态</p>
        <div
          style="display: flex; justify-content: flex-start; flex-wrap: wrap"
        >
          <div style="width: 33%; display: flex; align-items: center">
            <img src="@/assets/image/1.png" alt="" />
            <span style="font-size: 20px; margin-left: 5px">站数量（个）</span>
            <span style="font-size: 16px; margin-left: 20px">0</span>
          </div>
          <div style="width: 33%; display: flex; align-items: center">
            <img src="@/assets/image/2.png" alt="" />
            <span style="font-size: 20px; margin-left: 5px">调控桩数（个）</span>
            <span style="font-size: 16px; margin-left: 20px">0</span>
          </div>
          <div style="width: 33%; display: flex; align-items: center">
            <img src="@/assets/image/3.png" alt="" />
            <span style="font-size: 20px; margin-left: 5px">平均响应数(kw)</span>
            <span style="font-size: 16px; margin-left: 20px">0</span>
          </div>
          <div
            style="
              width: 33%;
              display: flex;
              align-items: center;
              margin-top: 20px;
            "
          >
            <img src="@/assets/image/4.png" alt="" />
            <span style="font-size: 20px; margin-left: 5px">持续间(分)</span>
            <span style="font-size: 16px; margin-left: 20px">0</span>
          </div>
          <div
            style="
              width: 33%;
              display: flex;
              align-items: center;
              margin-top: 20px;
            "
          >
            <img src="@/assets/image/5.png" alt="" />
            <span style="font-size: 20px; margin-left: 5px">总收益(元)</span>
            <span style="font-size: 16px; margin-left: 20px">0</span>
          </div>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="响应曲线" name="first">
            <div id="quxian"></div>
          </el-tab-pane>
          <el-tab-pane label="评估基线" name="second">
            <div id="jixian"></div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import pagetable from "@/components/pagetable";
export default {
  data() {
    return {
      activeName: "first",
      serviceTypeLabel: "", // 业务分类
      removeButDisabled: true,
      submitButtonDisabled: false,
      submitButtonDisabled2: false,
      ids: "",
      up_info: "",
      proSign: false,
      regionId: [],
      sscont: {}, //获取搜索值
      jgtab: [
        {
          name: "15249532014623",
          type: "2022-12-08 00:00",
          serviceType: "2022-12-08 13:01",
          linkPhone: "2022-12-08 15:55",
          linkName: "绝对值",
          linkName1: "手动新增",
          linkName2: "响应中",
          linkName3: "填谷",
          linkName4: 96,
        },
        {
          name: "15249536555435",
          type: "2022-12-07 12:05",
          serviceType: "2022-12-07 23:01",
          linkPhone: "2022-12-08 13:55",
          linkName: "绝对值",
          linkName1: "手动新增",
          linkName2: "响应中",
          linkName3: "填谷",
          linkName4: 95,
        },
      ],
      isShrink: false,
      detailShow: false,
      table: [],
      proList: [],
      serviceTypes_: [
        { name: "单位", value: 1 },
        { name: "部门", value: 2 },
      ],
      xqform: {},
      tableData2: [],
      Form: {},
      shHeight: "",
      amend: false, //修改框
      SelectionArray: [], //批量删除
      pageSize: 20,
      currentPage: 1,
      total: 0,
      isPower: false,
      items: [1111, 2222, 3333, 4444],
      serviceTypes: [],
      // <!-- parentTypes: [], -->
      orgTypes: [],
      butEnabled: true,
      detail: null,
      defaultProps: {
        checkStrictly: true,
        children: "children",
        value: "id",
        label: "name",
      },
      downloadLoading: false,
      inDeatils: [],
      orgTreeData: [],
      sign: true,
      mapSign: true,
      Pkeyword: "",
    };
  },
  components: { pagetable },
  mounted() {},
  methods: {
    handleClick(tab, event) {
      if (tab.index == "1") {
        this.$nextTick(() => {
          this.init2();
        });
      }
    },
    init() {
      var myChart = echarts.init(document.getElementById("shezhi"));

      var option = {
        radar: {
          indicator: [
            { name: "响应达标率", max: 100 },
            { name: "响应及格率", max: 100 },
            { name: "响应电量", max: 100 },
          ],
        },
        series: [
          {
            type: "radar",
            data: [
              {
                value: [99, 98, 80],
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    init1() {
      var myChart = echarts.init(document.getElementById("quxian"));

      var option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["需求目标负荷曲线", "实时负荷曲线"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "需求目标负荷曲线",
            type: "line",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "实时负荷曲线",
            type: "line",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
        ],
      };

      myChart.setOption(option);
    },

    init2() {
      var myChart = echarts.init(document.getElementById("jixian"));

      var option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["评估基线"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "评估基线",
            type: "line",
            data: [1, 8, 8, 8, 9, 8, 8],
          },
        ],
      };

      myChart.setOption(option);
    },
    // 详情
    detailrev(row) {
      this.detailShow = true;
      this.$nextTick(() => {
        this.init();
        this.init1();
      });
    },
    //表格选择框事件
    handleSelectionChange(val) {
      if (val.length) {
        this.removeButDisabled = false;
      } else {
        this.removeButDisabled = true;
      }
      this.SelectionArray = val;
    },
    // 分页点击事件
    handleSizeChange(val) {
      this.pageSize = val;
      if (this.$parent.$parent.$parent.$refs.tree.selOrg) {
        this.$parent.$parent.$parent.handleNodeClick(
          this.$parent.$parent.$parent.$refs.tree.selOrg
        );
      } else {
        this.cx(this.$parent.$parent.$parent.$refs.topform.ss);
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      if (this.$parent.$parent.$parent.$refs.tree.selOrg) {
        this.$parent.$parent.$parent.handleNodeClick(
          this.$parent.$parent.$parent.$refs.tree.selOrg
        );
      } else {
        this.cx(this.$parent.$parent.$parent.$refs.topform.ss);
      }
    },
    handleRefresh() {
      this.currentPage = 1;
      if (this.$parent.$parent.$parent.$refs.tree.selOrg) {
        this.$parent.$parent.$parent.handleNodeClick(
          this.$parent.$parent.$parent.$refs.tree.selOrg
        );
      } else {
        this.cx();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
#shezhi {
  height: 200px;
}
#quxian {
  height: 200px;
}
#jixian {
  height: 200px;
}
.wrap_form {
  width: 50%;
}
._info_wrap_dia {
  .b_label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.p_title {
  font-size: 16px;
  margin: 15px 0px 10px -2px;
  b {
    color: #1396c2;
  }
}
.ins_site {
  display: flex;
  aside {
    width: 220px;
    margin-right: 10px;
    background: #f3f3f3;
  }
  section {
    flex: 1;
  }
}

.el-tag {
  margin-right: 5px;
}
.dia_power {
  .a_label {
    display: inline-block;
    width: 120px;
    text-align: right;
    color: #a9a9a9;
  }
  .b_label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.dia_power .tite_icon {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: #005673;
}

.power_content_per {
  background: #fcfcfc;
  border: 1px solid #eeeeee;
  box-sizing: border-box;
}
.el-row {
}
.el-col {
  display: flex;
  p {
    margin: 3px 0;
  }
  p:nth-child(odd) {
    width: 150px;
    text-align: right;
    color: #a9a9a9;
  }
  p:nth-child(even) {
    flex: 1;
    text-align: left;
  }
}
.rowbg {
  padding: 10px;
  height: 40px;
}
.rowbg2 {
  @extend .rowbg;
  background-color: #f7f7f7;
}
.el-select {
  width: 100%;
}
.el-cascader {
  width: 100%;
}
.power_content {
  background: #fcfcfc;
  border: 1px solid #eeeeee;
  box-sizing: border-box;
  overflow: hidden;
  padding: 10px 16px;
  position: relative;
}
.shrink_imgs {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  z-index: 5;
}
.sh_height {
  height: 38px;
}
.sh_height2 {
  height: 80px;
}
//滚动条样式
*::-webkit-scrollbar {
  width: 7px;
  height: 9px;
  background-color: transparent;
} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
*::-webkit-scrollbar-track {
  background-color: #f0f6ff;
} /*定义滚动条轨道 内阴影+圆角*/
*::-webkit-scrollbar-thumb {
  background-color: #dbdbdb;
  border-radius: 6px;
} /*定义滑块 内阴影+圆角*/
*::-webkit-scrollbar-thumb:hover {
  background-color: #c2c2c2;
  border-radius: 6px;
} /*定义滑块 内阴影+圆角*/
.scrollbarHide::-webkit-scrollbar {
  display: none;
}
.scrollbarShow::-webkit-scrollbar {
  display: block;
}
</style>

